<template>
    <div>
        <el-card shadow="never">
            <template slot="header">
                <span>角色列表</span>
            </template>
            <div class="clearfix">
                <el-form :inline="true" class="search-form">
                    <el-form-item label="角色名">
                        <el-input placeholder="请输入角色名" v-model="searchParams.roleName" clearable />
                    </el-form-item>
                    <!-- <el-form-item label="角色代码">
                        <el-input placeholder="请输入角色代码" v-model="searchParams.code" clearable />
                    </el-form-item>
                    <el-form-item label="排序字段">
                        <el-select v-model="searchParams.sort_field" clearable placeholder="请选择排序字段">
                            <el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排序方式">
                        <el-select v-model="searchParams.sort_order" placeholder="请选择排序方式">
                            <el-option label="升序" value="asc" />
                            <el-option label="降序" value="desc" />
                        </el-select>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        <el-button @click="reset" icon="el-icon-refresh-right">重置</el-button>
                        <el-button type="primary" icon="el-icon-plus" @click="handleCreate"
                            v-auth="'add'">添加角色</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
                <el-table-column label="ID" prop="roleId" align="center" width="80" />
                <el-table-column label="角色名" prop="roleName" />
                <el-table-column label="角色代码" prop="roleKey" />
                <el-table-column label="角色描述" prop="remark" />
                <el-table-column label="排序" prop="roleSort" />
                <el-table-column label="状态" width="100" align="center">
                    <template slot-scope="{row}">
                        <el-tag :type="row.status | statusFilter">
                            {{ row.status | statusTextFilter }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="260" class-name="small-padding fixed-width">
                    <template slot-scope="{row}">
                        <el-button type="primary" size="mini" @click="sendAuth(row)"
                            v-auth="'assignment'">分配权限</el-button>
                        
                        <el-button type="primary" size="mini" @click="handleEdit(row)" v-auth="'edit'" v-if="row.roleId != 1">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(row)" v-auth="'del'" v-if="row.roleId != 1">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :page="page" :page_size="page_size" :total="total" @sizeChange="sizeChange"
                @currentChange="pageChange" />
        </el-card>
        <AddRole ref="addRoleRef" :visible="visible" :loading="listLoading" :isEdit="isEdit" :formData="formData"
            @submit="submitCreate" @close="close" />

        <SendAuth ref="sendAuthRef" />
    </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue';
import AddRole from './AddRole.vue';
import { addRole, delRole, editRole, roleGetPermissions, roleList } from '../api/role'
import SendAuth from './SendAuth.vue';
import { formData } from './options';
import { Message } from 'element-ui';

const DEFAULT_SEARCH = {
    // code: null,
    roleName: null,
    // sort_field: null,
    // sort_order: 'asc'
}

export default {
    name: 'UserList',
    components: { Pagination, AddRole, SendAuth },
    filters: {
        statusFilter(status) {
            const statusMap = {
                1: 'success',
                0: 'danger'
            }
            return statusMap[status]
        },
        statusTextFilter(status) {
            const statusMap = {
                1: '正常',
                0: '停用'
            }
            return statusMap[status]
        },
    },
    data() {
        return {
            options: [
                { label: 'ID', value: 'id' },
                { label: '角色名', value: 'name' },
                { label: '角色代码', value: 'code' }, { label: '排序', value: 'sort' }, { label: '状态', value: 'status' }, { label: '新增时间', value: 'create_time' }, { label: '修改时间', value: 'update_time' }
            ],
            formData: formData,
            isEdit: false,
            visible: false,
            searchParams: DEFAULT_SEARCH,
            list: [],
            total: 0,
            listLoading: true,
            page: 1,
            page_size: 20,
            editId: null,
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true;
            const { page, page_size } = this;
            const p = {
                current: page,
                size: page_size,
                roleName: this.searchParams.roleName,
                // ...this.searchParams,
            }
            roleList(p).then(res => {
                this.total = res.total;
                this.list = res.records;
            }).finally(() => {
                this.listLoading = false
            })
        },
        pageChange(page) {
            this.page = page;
            this.getList();
        },
        sizeChange(size) {
            this.page_size = size;
            this.page = 1;
            this.getList();
        },
        handleSearch() {
            this.page = 1;
            this.getList();
        },
        reset() {
            this.searchParams.roleName = null;
            this.page = 1;
            this.getList()
        },
        handleCreate() {
            this.visible = true;
            this.isEdit = false;
            this.$refs.addRoleRef.add();
        },
        async submitCreate(data) {
            this.listLoading = true;
            try {
                let result = this.isEdit ? await editRole({ ...data, roleId: this.editId }) : await addRole(data);
                const msg = `${this.isEdit ? '修改' : '新增'}成功`;
                this.close();
                Message.success(msg);
                this.handleSearch();
                this.listLoading = false;
            } catch (e) {
                this.listLoading = false;
            }
        },
        handleEdit(row) {
            this.editId = row.roleId;
            this.formData.forEach(i => {
                i.value = i.key === 'status' ? !!row[i.key] : row[i.key]
            })
            this.formData.dataScope = Number(row.dataScope)
            this.visible = true;
            this.isEdit = true;
            this.$refs.addRoleRef.open(this.formData)
        },
        close() {
            this.visible = false;
            this.formData.forEach(i => {
                i.value = i.key === 'status' ? true : null;
            })
        },
        handleDelete(row) {
            this.$confirm('确认删除该用户?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                delRole(row.roleId).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.handleSearch();
                }).finally(() => {
                    this.listLoading = false;
                })
            }).catch(() => { })
        },
        sendAuth(data) {
            this.$refs.sendAuthRef.open(data.roleId)
        }
    }
}
</script>